import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { PageContiner } from '@/components';
import { MODULE_NAME, getList } from './redux';
import { List, Input, Card, Tabs, Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import type { IListDataRow } from './index.d';

const { Search } = Input;
const { TabPane } = Tabs;
// const { Paragraph } = Typography;

const HeadContentRender: React.FC<{ onSearchChange: Function }> = ({ onSearchChange }) => {
  const [keyword, setKeyword] = useState<string>('');
  const [tableKey, setTableKey] = useState<string>('');

  useEffect(() => {
    onSearchChange(keyword, tableKey)
  }, [keyword, tableKey])
  return (
    <>
      <div style={{ textAlign: 'center', marginBottom: '15px' }}>
        <Search onChange={(e) => setKeyword(e.target.value)} style={{ maxWidth: '522px' }} placeholder="请输入关键字进行搜索" enterButton="搜索" />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Tabs defaultActiveKey="all" tabPosition="top" onChange={(tabKey: string) => setTableKey(tabKey)}>
          <TabPane tab="全部" key="all" />
          <TabPane tab="邢台家乐园小学" key={'1'} />
          <TabPane tab="邢台市龙泉小学" key={'2'} />
          <TabPane tab="邢台市东关逸夫小学" key={'3'} />
        </Tabs>
        <Button icon={<DownloadOutlined />} href="http://alioss.hitcxedu.com/hitcx/hik/VideoWebPlugin.exe" type="primary">下载插件</Button>
      </div>
    </>
  )
}

const BuildingInformation: React.FC = () => {
  const dispatch = useDispatch();
  const dataSource = useSelector(state => state[MODULE_NAME].dataSource);

  const getDataList = (keyword?: string, tableKey?: string) => {
    dispatch(getList(keyword, tableKey))
  }

  useEffect(() => {
    getDataList()
  }, [])
  const cardList = (
    <List
      rowKey="id"
      dataSource={dataSource}
      loading={false}
      grid={{
        gutter: 16,
        xs: 1,
        sm: 2,
        md: 3,
        lg: 3,
        xl: 4,
        xxl: 4,
      }}
      renderItem={(item: IListDataRow) => (
        <Link to={!item.camerId?`/online-research/live-broad/room?id=${item.id}`:`/hkCamer/index.html?id=${item.camerId}&title=${item.title}`} target={item.camerId?'_blank':''}>
          <List.Item>
            <Card hoverable cover={<img alt="提示" src={item.image} />}>
              <Card.Meta
                title={item.title}
              // description={
              //   <Paragraph ellipsis={{ rows: 2 }}>描述信息</Paragraph>
              // }
              />
            </Card>
          </List.Item>
        </Link >
      )}
    ></List >
  )

  return (
    <PageContiner hiddenBreadcrumb={false} HeadContentRender={() => <HeadContentRender onSearchChange={getDataList} />}>
      {cardList}
    </PageContiner>
  )
}

export default BuildingInformation
